<template>
  <div>
    <div class="home">
      <div class="head">
        <div class="logo">旅梦后台管理系统</div>
        <div class="user">
          <span>Welcome, {{ route.query.name }}</span>
        </div>
      </div>
      <div class="main">
        <div class="menu">
          <ul>
            <li>
              <router-link to="/home/user">用户管理</router-link>
            </li>
            <li>
              <router-link to="/article">文章管理</router-link>
            </li>
            <li>
              <router-link to="/catgory">分类管理</router-link>
            </li>
          </ul>
        </div>
        <div class="content">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute()

console.log(route.query.name);
// console.log(route.params.name)

</script>

<style lang="css" scoped>
.head{
  height: 60px;
  display: flex;
  justify-content: space-between;
  padding: 0 30px;
  align-items: center;
  background-color: rgba(81, 1, 81, 0.678);
  color: white;
}
.main{
  display: flex;
  height: calc(100vh - 60px);
}
.menu{
  flex: 0 0 200px;
  background-color: rgb(162, 81, 237);
}
.menu ul {
  list-style: none;
  text-align: center;
}
.menu ul li a{
  display: block;
  padding: 15px 0;
  color: aliceblue;
  cursor: pointer;
}
.content{
  flex: 1;
}
</style>